<template>
	<div>
		<p>
			clicked: {{ count }} times, count is
			{{ oddOrEven }}
		</p>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementIfOdd">increment if odd</button>
		<button @click="incrementAsync(3)">increment async</button>
	</div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
	name: "App",
	computed: {
		/*
			...mapState(["count"])
				将vuex的state中count数据映射到计算属性中

				执行过程：
					1. 先执行函数 const result = mapState(["count"])
					2. 展开函数的返回值 ...result

				mapState是什么数据类型？加了括号调用，必须是Function
				mapState(["count"])的返回值是什么数据类型？对象
					使用三点运算符，所以它得是数组、对象、字符串等类型
					只有对象或数组能展开到对象中，
					得到的数据是count，数组的属性名只能是下标，不能是count

				...mapState(["count"])展开数据到计算属性中，是只读，还是可读可写？只读的
					Vuex数据都是只读的，不能直接修改
				
				mapState(["count"])的返回值类似于：
					{
						count() {
							return this.$store.state.count
						}
					}

				mapGetters(["oddOrEven"])的返回值类似于：
					{
						oddOrEven() {
							return this.$store.getters.oddOrEven
						}
					}
		*/
		...mapState(["count"]), // 将vuex的state中xxx数据映射到计算属性中
		...mapGetters(["oddOrEven"]), // 将vuex的getters中xxx数据映射到计算属性中
	},
	methods: {
		...mapActions(["incrementAsync"]), // 将vuex的actions中xxx函数映射到方法中
		...mapMutations(["INCREMENT", "DECREMENT"]), // 将vuex的mutations中xxx函数映射到方法中
		increment() {
			this.INCREMENT(3);
		},
		decrement() {
			this.DECREMENT(3);
		},
		incrementIfOdd() {
			
			if ((this.count & 1) === 1) {
				this.INCREMENT(3);
			}
		},
		// incrementAsync() {
		// 	this.incrementAsync(3);
		// },
	},
};
</script>

<style></style>
